<template>
  <el-container>
    <el-aside width="200px">
      <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        ><el-menu-item index="0">
          <el-page-header @back="goBack">
          </el-page-header>
        </el-menu-item>
        <el-menu-item index="1">
        <el-icon><UserFilled /></el-icon>
          <span @click="currentPageIndex = 0">个人信息</span>
        </el-menu-item>
        <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <span @click="currentPageIndex = 1">商品管理</span>
        </el-menu-item>

        <el-sub-menu index="3">
          <template #title>
            <el-icon><document /></el-icon>
            <span>订单管理</span>
          </template>
          <el-menu-item index="3-1" @click="currentPageIndex = 2">我的买入</el-menu-item>
          <el-menu-item index="3-2" @click="currentPageIndex = 4">我的卖出</el-menu-item>
        </el-sub-menu>

        <el-menu-item index="4">
           <el-icon><Location /></el-icon>
          <span @click="currentPageIndex = 3">地址管理</span>
        </el-menu-item>
        <!-- <el-menu-item index="4">
          <el-icon><setting /></el-icon>
          <span>设置</span>
        </el-menu-item> -->
      </el-menu>
    </el-aside>
    <el-main>
    <PersonalInformationView v-if="currentPageIndex === 0" />
    <PersonalGoodsView v-if="currentPageIndex === 1" />
    <IndividualBuyOrdersView v-if="currentPageIndex === 2" />
    <AddressManagementView v-if="currentPageIndex === 3" />
    <IndividualSellOrdersView v-if="currentPageIndex === 4" />

    </el-main>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import instance from "../../utils/request";
import { Document, Menu as IconMenu, Location,UserFilled } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import PersonalInformationView from "../user/PersonalInformationView.vue";
import PersonalGoodsView from "../product/PersonalGoodsView.vue";
// import PersonalOrderView from "../order/PersonalOrderView.vue";
import AddressManagementView from "@/views/Platform/AddressManagementView.vue";
import IndividualBuyOrdersView from "@/views/order/IndividualBuyOrdersView.vue";
import IndividualSellOrdersView from "@/views/order/IndividualSellOrdersView.vue";

const router = useRouter();
const currentPageIndex = ref(0); // 当前页面索引，默认显示商品管理页面
const currentPage = ref(1);
const pageSize = ref(5);
const total = ref(0);
const tableData = ref([]);




onMounted(() => {
  getProductList();
});
const getProductList = async () => {
  try{


  // 在这里添加获取商品列表的逻辑
  const res = await instance.get("/product/personalList", {
    params: {
      page: currentPage.value,
      pageSize: pageSize.value,
    },
  });
  if (res.data.code === 200) {
    tableData.value = res.data.data.records;
    total.value = res.data.data.total;
  } else {
    ElMessage.error("获取用户列表失败");
  }
  }catch(error){
    console.error("Error fetching product list:",error);
  }
};

function goBack() {
  // 返回上一页
  router.push("/")
  // 刷新页面
  window.location.reload();
}
</script>

<style scoped>
.my-products-view {
  padding: 20px;
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.product-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.product-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info {
  padding: 12px;
}

.product-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  height: 40px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.product-price {
  font-size: 18px;
  color: #ff4444;
  font-weight: bold;
  margin-bottom: 8px;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.product-detail {
  display: flex;
  height: 100%;
}

.detail-image {
  flex: 1;
  max-width: 50%;
}

.carousel-image,
.single-image {
  width: 100%;
  max-height: 500px;
  object-fit: contain;
}

.detail-info {
  flex: 1;
  padding: 20px;
}

.detail-info h2 {
  margin-top: 0;
  margin-bottom: 15px;
}

.detail-price {
  font-size: 24px;
  color: #ff4444;
  font-weight: bold;
  margin-bottom: 15px;
}

.detail-condition,
.detail-description,
.detail-meta {
  margin-bottom: 15px;
}

.detail-meta div {
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .product-detail {
    flex-direction: column;
  }

  .detail-image {
    max-width: 100%;
    margin-bottom: 20px;
  }

  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

.demo-pagination-block {
  display: flex;
  justify-content: flex-end;
}
</style>
